<template>
  <div id="app">
    <!-- Chapter-1: 原先 Vue 脚手架创建使用的脚手架 -->
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->

    <!-- Chapter-2.2 -->
    <!-- <todo-list /> -->

    <!-- Chapter-3.2: 为 todo-list 创建一个 flex 布局 -->
    <!-- <flex-for-todo-list-vue /> -->

    <!-- chapter-3.3: Flex 布局 -->
    <!-- <flex-demo /> -->
    <!-- <sider-bar-top /> -->
    <sider-bar-left />

  </div>
</template>

<script>
import SiderBarLeft from './components/SiderBarLeft.vue';
// import SiderBarTop from "./components/SiderBarTop.vue";
// import FlexDemo from './components/FlexDemo.vue'
// import FlexForTodoListVue from './components/FlexForTodoList.vue';
// import TodoList from "./components/TodoList.vue";
// import HelloWorld from './components/HelloWorld.vue'
export default {
  name: "App",
  components: {
    SiderBarLeft
    // SiderBarTop,
    // FlexDemo,
    // FlexForTodoListVue,
    // TodoList,
    // HelloWorld,
  },
};
</script>

<style>
/* 注释 vue 脚手架的样式 */
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */

/* 浏览器默认样式中 body 的 magin 属性为 8 */
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}
/*  */
#app {
  width: 100%;
  height: 100%;
}
</style>
